<html>
  <head>
	  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>i5ting_ztree_toc:es6</title>
		<link href="toc/style/github-bf51422f4bb36427d391e4b75a1daa083c2d840e.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/style/github2-d731afd4f624c99a4b19ad69f3083cd6d02b81d5.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/css/zTreeStyle/zTreeStyle.css" media="all" rel="stylesheet" type="text/css"/>
	  <style>
		pre {
		    counter-reset: line-numbering;
		    border: solid 1px #d9d9d9;
		    border-radius: 0;
		    background: #fff;
		    padding: 0;
		    line-height: 23px;
		    margin-bottom: 30px;
		    white-space: pre;
		    overflow-x: auto;
		    word-break: inherit;
		    word-wrap: inherit;
		}

		pre a::before {
		  content: counter(line-numbering);
		  counter-increment: line-numbering;
		  padding-right: 1em; /* space after numbers */
		  width: 25px;
		  text-align: right;
		  opacity: 0.7;
		  display: inline-block;
		  color: #aaa;
		  background: #eee;
		  margin-right: 16px;
		  padding: 2px 10px;
		  font-size: 13px;
		  -webkit-touch-callout: none;
		  -webkit-user-select: none;
		  -khtml-user-select: none;
		  -moz-user-select: none;
		  -ms-user-select: none;
		  user-select: none;
		}

		pre a:first-of-type::before {
		  padding-top: 10px;
		}

		pre a:last-of-type::before {
		  padding-bottom: 10px;
		}

		pre a:only-of-type::before {
		  padding: 10px;
		}

		.highlight { background-color: #ffffcc } /* RIGHT */
		</style>
  </head>
  <body>
	  <div>
				<div style='width:25%;'>
						<ul id="tree" class="ztree" style='width:100%'>

						</ul>
				</div>
        <div id='readme' style='width:70%;margin-left:20%;'>
          	<article class='markdown-body'>
            	<h1 id="let-const">let与const</h1>
<h2 id="let-">let 定义变量</h2>
<ul>
<li>不属于顶层对象window<ul>
<li>var a = 1和 b=5的区别：var相当于在当前作用域内声明变量 而不加var是为全局变量window对象的属性赋值</li>
<li><font color=red>js在设计之初：把window对象的属性和全局变量进行了挂钩（说明：var a = 5时实际是定义了全局变量，但是window.a也为5）</font></li>
<li>let 解决全局变量和windowd对象的属性挂钩的问题</li>
</ul>
</li>
<li>不允许重复声明</li>
<li>不存在变量提升<ul>
<li>var 之前打印是未定义 let 之前打印报错</li>
</ul>
</li>
<li>暂时性死区<ul>
<li>变量声明之前不可以使用（代码更加安全）</li>
</ul>
</li>
<li>块级作用域<ul>
<li>一个大括号生成一个块级作用域</li>
</ul>
</li>
</ul>
<h2 id="const-">const 定义常量</h2>
<ul>
<li>不属于顶层对象window</li>
<li>不允许重复声明</li>
<li>块级作用域</li>
<li>不允许重复声明</li>
<li>不存在变量提升</li>
<li>const定义常量<ul>
<li>es5定义常量  <pre class="prettyprint lang-javascript">  
  function getNowDate() {
      Object.defineProperty(window, 'PI', {
          value: 3.14,
          writable: false, //是否可写
      })
  }
  </pre></li>
<li>const 定义的常量是基本数据类型的时候 值不可以改变</li>
<li>const 定义的常量是引用数据类型的时候 值可以改变（详见：堆栈内存）但是地址不变</li>
<li>Object.freeze(Obj) 可以冻结对象<strong><font color=red>第一层</font></strong>的属性 （冻结后属性值不能改变）<h1 id="-">解构赋值</h1>
</li>
</ul>
</li>
<li>数组解构<ul>
<li>let [a,b,c] = [1,2,3]</li>
<li>let [a,b,[c,d]] = [1,2,[3,4]]
-数组解构</li>
<li>{name, age} = {name: &#39;lpz&#39;,age: &#39;25&#39;}</li>
</ul>
</li>
<li>字符串解构<ul>
<li>let [a,b,c] = &#39;lpz&#39;</li>
</ul>
</li>
<li>解构重命名（别名）<ul>
<li>{name：uname, age:uage} = {name: &#39;lpz&#39;,age: &#39;25&#39;}</li>
</ul>
</li>
<li>设置默认值<ul>
<li>{name, age=15} = {name: &#39;lpz&#39;}</li>
</ul>
</li>
</ul>
<h1 id="-">数组</h1>
<h2 id="-">数组遍历</h2>
<h3 id="es5-">ES5中数组遍历</h3>
<ul>
<li>for循环</li>
<li>forEach()<ul>
<li>没有返回值，只是针对每个元素调用func</li>
<li>不支持break(跳出for循环) continue(跳出当前这一轮的循环) 关键字</li>
</ul>
</li>
<li>map()<ul>
<li>返回新的Array,每个元素为调用func的结果</li>
<li>不会改变原有的数组</li>
</ul>
</li>
<li>filter()<ul>
<li>返回新的Array,每个元素为符合func条件的元素</li>
<li>不会改变原数组</li>
</ul>
</li>
<li>some()<ul>
<li>返回boolean,判断是否有元素符合func条件（只要有一个满足条件就返回true）</li>
<li>不会改变原数组</li>
</ul>
</li>
<li>every()<ul>
<li>返回boolean,判断每个元素是否都符合func条件（需要每一个都满足条件，才返回true）</li>
</ul>
</li>
<li><p>reduce()</p>
<ul>
<li>接收一个函数作为累加器</li>
<li><p>应用场景：累加，取最大值，去重</p>
<pre><code>      let arr = [1,2,3,3]

      let sum = arr.reduce((prev,cur)=&gt; {
          return prev + cur
      },0)

      let max = arr.reduce((prev,cur)=&gt; {
          return Math.max(prev, cur) 
      })

      let res = arr.reduce((prev,cur)=&gt; {
          prev.indexOf(cur) === -1 &amp;&amp; prev.push(cur)
          return prev
      },[])
</code></pre></li>
</ul>
</li>
<li>for in<ul>
<li>for in适合遍历对象，不适合遍历数组</li>
<li>遍历数组时会将原型上的方法一起遍历<h3 id="es6-">ES6中数组遍历</h3>
</li>
</ul>
</li>
<li>find()<ul>
<li>放回第一个符合条件的元素(没找到的话返回undefined)</li>
</ul>
</li>
<li>findIndex()<ul>
<li>放回第一个符合条件的元素下标(没找到的话返回undefined)</li>
</ul>
</li>
<li>for of<ul>
<li>适用于遍历数组</li>
</ul>
</li>
<li>values():元素<pre><code>  for (const item of array.values()) {
      console.log(item)
  }
</code></pre></li>
<li>keys()：下标<pre><code>  for (const item of array.keys()) {
      console.log(item)
  }
</code></pre></li>
<li><p>entries():下标及元素</p>
<pre><code>  for (const [index,item] of array.entries()) {
      console.log(index,item)
  }
</code></pre><h2 id="-">数组扩展</h2>
</li>
<li><p>类数组/伪数组</p>
<ul>
<li>伪数组：<ul>
<li><pre><code>  let div3 = document.querySelectorAll(&#39;.xx&#39;) //输出 NodeList []
</code></pre></li>
<li><pre><code>  //自定义定义伪数组
  let div3 = {
  0：&#39;es6&#39;,
  1：&#39;es7&#39;,
  2：&#39;es8&#39;,
  length: 3
  }
</code></pre></li>
</ul>
</li>
<li>es5伪数组转成真正的数组：let arr = Array.prototype.slice.call(divs3)</li>
<li>es6伪数组转成真正的数组：Array.from(divs3)</li>
</ul>
</li>
<li>Array.of:创建数组<ul>
<li>let arr = Array.of(3) 输出：[3]</li>
</ul>
</li>
<li>.copyWithin: [1,2,3,4,5].copyWithin(1,3)  输出：[1,4,5,4,5]</li>
<li>.fill <ul>
<li>new Array[3].fill(3) 输出：[3,3,3]</li>
<li>[1,2,3,4,5].fill(&#39;p&#39;,1,3) 输出：[1,p,p,4,5]</li>
</ul>
</li>
<li>includes<ul>
<li>includes 返回布尔值 indexOf() 返回下标</li>
<li>includes 可以检查NaN indexOf() 不能检查NaN<h1 id="-">函数</h1>
<h2 id="-">函数参数</h2>
</li>
</ul>
</li>
<li>默认参数<pre><code>  function foo(x,y = &#39;world&#39;) {
      console.log(x,y)
  }
</code></pre></li>
<li>默认参数与解构赋值连用<pre><code>  function ajax(url, {
      body: &#39;&#39;,
      method: &#39;get&#39;,
      headers: {}
  } = {}){
      console.log(method)    
  }
  ajax(&#39;http://www.baidu.com&#39;,{ method: &#39;POST&#39;})
</code></pre></li>
<li>length: length 可以获得函数没有设置默认值的参数<pre><code>  function foo(x,y = &#39;world&#39;) {
      console.log(x,y)
  }
  console.log(foo.length) //打印出：1
</code></pre></li>
<li>作用域：函数的参数形成一个单独的作用域<pre><code>  let x = 1
  function foo(y = x) {
  let x = 2
      console.log(y) //打印出：1
  }
</code></pre></li>
<li>name属性</li>
<li><pre><code>function foo() {}
console.log(foo,name) //打印出函数名：foo
=======================================================================
function foo() {
  console.log(this) //bind方法第一个参数作为this的指向
}
foo().bind({name: &#39;xinming&#39;})
</code></pre><h2 id="-rest-">扩展运算符 和 rest 参数 (...)</h2>
<h3 id="-">扩展运算符</h3>
</li>
<li>把数组或者类数组展开成逗号隔开的值</li>
<li>打散数组 let arr = [1,2,3] console.log(...arr)</li>
<li>合并数组 let arr1 = [1,2] let arr2 = [1,2] arr1.push(...arr2)</li>
<li>打散字符串 let arr1 = &#39;lpz&#39; let arr2 = [...arr1]<h3 id="rest-">rest 参数</h3>
</li>
<li>把逗号隔开的值组合成数组</li>
<li>let [x,...y] = [1,2,3]<h2 id="-">箭头函数</h2>
<code>`</code>
//es5定义函数方法一：可以在定义前使用
function sum(x,y) {
  return x + y
}</li>
</ul>
<p>//es5定义函数方法二：不可以在定义前使用
var sum = function (x,y) {
    return x + y
}</p>
<p>//箭头函数：可以在定义前使用
let sum = (x, y) =&gt; {
    return x + y
}</p>
<pre><code>### 箭头函数与普通的匿名函数区别
- this 指向定义时所在的对象，而不是调用时所在的对象
- 不可以当作构造函数
</code></pre><pre><code>let People = (name, age) =&gt; {
    this.name = name
    this.age = age
}
let p1 = new People(&#39;lpz&#39;, 34)
console.log(p1) //报错
```
</code></pre><ul>
<li>不可以使用 arguments 对象<pre><code>  let foo = () =&gt; {
      console.log(arguments) //报错
  }
</code></pre></li>
</ul>
<h1 id="-">对象</h1>
<h2 id="-">对象的扩展</h2>
<ul>
<li>属性简洁表示法<pre><code>  let name = &#39;lpz&#39;
  let age = 18
  let obj = {
      name,
      age
  }
  console.log(obj)
</code></pre></li>
<li>属性名表达式<pre><code>  let name = &#39;lpz&#39;
  let obj = {
      [name]: &#39;kiki&#39;
  }
  console.log(obj)
</code></pre></li>
<li>对象中方法的简写模式<pre><code>  let name = &#39;lpz&#39;
  let obj = {
      name,
      study: function () {
          console.log(this.name)
      }
  }
  // 简写（注：此处使用箭头函数的话this指向会改变）
  let name = &#39;lpz&#39;
  let obj = {
      name,
      study() {
          console.log(this.name)
      }
  }
</code></pre></li>
<li>Object.is()<ul>
<li>用于判断两个数据值是否<strong>严格相等</strong>类似于 <code>===</code></li>
<li>Object.is(2,&#39;2&#39;) 类似于 2===&#39;2&#39;</li>
</ul>
</li>
<li>扩展运算符 与 Object.assign()<pre><code>  let x = {
      a: 3,
      b: 4
  }
  let y = { ...x }
  console.log(y) // { a: 3, b: 4 }
</code></pre><pre><code>  let x = {
      a: 3,
      b: 4
  }
  let y = { 
      a: 6,
      c: 5,
   }
  console.log( bject,assign(y,x)) // { a: 3, b: 4，c:5 } 后面会覆盖前面
</code></pre></li>
<li>in<ul>
<li>可用于判断对象是否包含某个属性</li>
<li>可用于数组：判断数组某个指定下标是否存在值     <code>console.log(2 in arr)</code></li>
</ul>
</li>
<li><p>对象的遍历方式</p>
<ul>
<li><p><code>for(let key in obj){ console.log(key,obj[key]) }</code></p>
</li>
<li><p><code>Object.keys(obj).forEach( key =&gt; { console.log(key,obj[key]) })</code></p>
</li>
<li><p><code>Object.getOwnPropertyNames(obj).forEach( key =&gt; { console.log(key,obj[key]) })</code></p>
</li>
<li><p><code>Object.OwnKeys(obj).forEach( key =&gt; { console.log(key,obj[key]) })</code></p>
<h2 id="-">深拷贝浅拷贝</h2>
<h3 id="-">浅拷贝</h3>
</li>
</ul>
</li>
<li><p>Object.assign() </p>
</li>
</ul>
<h3 id="-">深拷贝</h3>
<ul>
<li><p>JSON.parse(JSON.stringify(obj))</p>
<pre><code>      // 对对象，数组，基本数据类型进行深拷贝
      // 检查类型
      let checkType = data =&gt; {
          return Object.prototype.toString.call(data).slice(8,-1)
      }

      let deepClone = target =&gt; {
          let targetType = checkType(target)
          let result
          if( targetType === &#39;Object&#39; ) {
              result = {}
          }else if( targetType === &#39;Array&#39; ){
              result = []
          }else {
              return target
          }
          for (let i in target ) {
              let value = target[i];
              let valueType = checkType(value)
              if( valueType === &#39;Object&#39; || valueType === &#39;Array&#39;){
                  result[i] = deepClone(value)
              }else {
                  result[i] = value
              }

          }
          return result
      }

</code></pre></li>
</ul>

          	</article>
        </div>
		</div>
  </body>
</html>
<script type="text/javascript" src="toc/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="toc/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="toc/js/ztree_toc.js"></script>
<script type="text/javascript" src="toc_conf.js"></script>

<SCRIPT type="text/javascript" >
<!--
$(document).ready(function(){
    var css_conf = eval(markdown_panel_style);
    $('#readme').css(css_conf)
    
    var conf = eval(jquery_ztree_toc_opts);
		$('#tree').ztree_toc(conf);
});
//-->
</SCRIPT>